<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>editable 测试</title>
    <style>
        html,
        body {
            background-color: #fff;
        }

        .tips {
            color: #999;
        }

        label.tips {
            font-size: 16px;
            font-weight: normal;
            font-style: normal;
        }

        input,
        select {
            border-width: 1px;
            border-style: solid;
            border-color: #666 #ccc #ccc #666;
            padding: 6px 6px 5px;
            outline: none;
        }

        select {
            width: 100%;
            height: 26px;
            text-align: left;
            box-sizing: border-box;
            padding: 5px 4px 6px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background: #fff url(./images/arrow-down-16.png) no-repeat scroll right center;
            border-radius: 0;
        }

        input:focus,
        select:focus {
            border-color: #06f;
            background-color: #f4f9ff;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        table>thead>tr>th,
        table>tbody>tr>td {
            padding: 10px;
            border: 1px solid #ccc;
        }

        table>thead>tr>th {
            background-color: #eee;
        }
    </style>
</head>

<body>

    <h1>editable demo</h1>
    <p class="tips">一款基于jQuery的轻量级可编辑表格插件，适用于快速录单等应用场景，支持键盘操作</p>

    <br />
    <h2>editable1 实例<label class="tips">（全功能：支持操作按钮、上下左右方向键移动、最后单元格TAB键新增行等）</label></h2>
    <!-- 每个table需要一个div包裹 -->
    <div>
        <table id="editable1">
            <thead>
                <!-- thead是必须的 -->
                <tr>
                    <th style="width:40px;"></th> <!-- 注意是th不是td -->
                    <th style="width:100px;">证书名称</th>
                    <th style="width:100px;">证书编号</th>
                    <th style="width:100px;">颁发日期</th>
                    <th style="width:100px;">颁发机构</th>
                    <th style="width:100px;">备注</th>
                </tr>
            </thead>

            <tbody>
                <!-- <tr> tbody是必须的
                    <td></td> 这里才是td
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr> -->
            </tbody>
        </table>
    </div>

    <br />

    <h2>editable2 实例<label class="tips">（禁用操作按钮，最后单元格TAB键依然可新增行）</label></h2>
    <!-- 每个table需要一个div包裹 -->
    <div>
        <table id="editable2">
            <thead>
                <!-- thead是必须的 -->
                <tr>
                    <th style="width:40px;">序号</th> <!-- 注意是th不是td -->
                    <th style="width:220px;">项目名称</th>
                    <th style="width:100px;">开始时间</th>
                    <th style="width:100px;">结束时间</th>
                    <th style="width:140px;">实施单位</th>
                    <th style="width:80px;">备注说明</th>
                </tr>
            </thead>

            <tbody>
                <!-- <tr> tbody是必须的
                    <td></td> 这里才是td
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr> -->
            </tbody>
        </table>
    </div>

    <br />

    <h2>editable3 实例<button id="editable3-tran-btn">点击转换成editable实例（空表格）</button></h2>
    <!-- 每个table需要一个div包裹 -->
    <div>
        <table id="editable3">
            <thead>
                <!-- thead是必须的 -->
                <tr>
                    <th style="width:40px;">序号</th> <!-- 注意是th不是td -->
                    <th style="width:220px;">项目名称</th>
                    <th style="width:100px;">开始时间</th>
                    <th style="width:100px;">结束时间</th>
                    <th style="width:140px;">实施单位</th>
                    <th style="width:80px;">备注说明</th>
                </tr>
            </thead>

            <tbody>
                <!-- <tr> tbody是必须的
                    <td></td> 这里才是td
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr> -->
            </tbody>
        </table>
    </div>

    <br />

    <h2>editable4 实例<button id="editable4-tran-btn">点击转换成editable实例（已有行的表格）</button></h2>
    <!-- 每个table需要一个div包裹 -->
    <div>
        <table id="editable4">
            <thead>
                <!-- thead是必须的 -->
                <tr>
                    <th style="width:40px;">序号</th> <!-- 注意是th不是td -->
                    <th style="width:220px;">项目名称</th>
                    <th style="width:100px;">开始时间</th>
                    <th style="width:100px;">结束时间</th>
                    <th style="width:140px;">实施单位</th>
                    <th style="width:80px;">备注说明</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>1</td>
                    <td>项目1</td>
                    <td>2021-12-18</td>
                    <td>2021-12-19</td>
                    <td>宁波市</td>
                    <td>1</td>
                </tr>
            </tbody>
        </table>
    </div>

    <br />

    <h2>editable5 数据获取实例 <button id="editable5-tran-btn">点击获取编辑数据（注意console中显示）</button></h2>
    <!-- 每个table需要一个div包裹 -->
    <div>
        <table id="editable5">
            <thead>
                <!-- thead是必须的 -->
                <tr>
                    <th style="width:40px;">序号</th> <!-- 注意是th不是td -->
                    <th style="width:220px;">项目名称</th>
                    <th style="width:100px;">开始时间</th>
                    <th style="width:100px;">结束时间</th>
                    <th style="width:140px;">实施单位</th>
                    <th style="width:80px;">备注说明</th>
                </tr>
            </thead>

            <tbody>
                <!-- <tr> tbody是必须的
                    <td></td> 这里才是td
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr> -->
            </tbody>
        </table>
    </div>
    <br />
    <div id="editable5-data-result" style="width:auto;min-height:50px;background-color: #f2f2f2;border:1px solid #ccc;padding:10px;">editable5的编辑数据</div>
    <br />
    <br />

    <button id="editable-debug-btn">所有editable实例调试信息（注意console中显示）</button>
    <button id="editable1-debug-btn">editable1的调试信息（注意console中显示）</button>
    <button id="editable2-debug-btn">editable2的编辑行调试信息（注意console中显示）</button>
    <br /><br />
    <div id="editable-debug-result" style="width:auto;min-height:50px;background-color: #f2f2f2;border:1px solid #ccc;padding:10px;">调试输出信息</div>
    <br />
    <br />


    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="js/laydate/laydate.css" />
    <script src="js/laydate/laydate.js"></script>
    <script src="js/layer/layer.js"></script>
    <script src="../src/editable.js"></script>

    <script>
        let values = { 0: '禁用', 1: '启用' }; // select下拉框的可选数据来源

        funsent.editable.init('#editable1', {
            tag: 'editable1_tag',
            row_number: 2,
            editable_row_max: 10,
            enable_keyboard: true,
            enable_tab_insert: true,
            enable_button: true,
            columns: [
                0, //{ type: 'checkbox', name: 'id', value: '', readonly: false },
                { type: 'text', name: 'name', value: '', align: 'left', readonly: false },
                { type: 'text', name: 'certno', value: '', align: 'left', readonly: false },
                { type: 'date', name: 'issue_time', value: '', align: 'center', readonly: true },
                { type: 'text', name: 'issue_body', value: '', align: 'left', readonly: false },
                { type: 'select', name: 'remark', value: '1', align: 'left', readonly: false, values: values, style: { padding: '5px 4px 6px' } },
            ]
        });

        funsent.editable.init('#editable2', {
            tag: 'editable2_tag',
            row_number: 3,
            editable_row_max: 10,
            enable_keyboard: true,
            enable_tab_insert: true,
            enable_button: false,
            columns: [
                { type: 'checkbox', name: 'id', value: '', readonly: false },
                { type: 'text', name: 'name', value: '', align: 'left', readonly: false },
                { type: 'date', name: 'begin_time', value: '', align: 'center', readonly: false },
                { type: 'date', name: 'end_time', value: '', align: 'center', readonly: true },
                { type: 'text', name: 'organizer', value: '', align: 'left', readonly: false },
                { type: 'select', name: 'remark', value: '', align: 'left', readonly: false, values: { 0: 'ok', 1: 'no' }, style: { padding: '5px 4px 6px' } },
            ]
        });

        $('#editable3-tran-btn').click(function () {
            $(this).unbind('click').prop('disabled', true);
            funsent.editable.init('#editable3', {
                tag: 'editable3_tag',
                row_number: 4,
                editable_row_max: 10,
                enable_keyboard: true,
                enable_tab_insert: true,
                enable_button: true,
                columns: [
                    0, //{ type: 'checkbox', name: 'id', value: '', readonly: false },
                    { type: 'text', name: 'name', value: '', align: 'left', readonly: false },
                    { type: 'date', name: 'begin_time', value: '', align: 'center', readonly: false },
                    { type: 'date', name: 'end_time', value: '', align: 'center', readonly: true },
                    { type: 'text', name: 'organizer', value: '', align: 'left', readonly: false },
                    { type: 'select', name: 'remark', value: '', align: 'left', readonly: false, values: { 0: 'ok', 1: 'no' }, style: { padding: '5px 4px 6px' } },
                ]
            });
        });

        $('#editable4-tran-btn').click(function () {
            $(this).unbind('click').prop('disabled', true);
            funsent.editable.init('#editable4', {
                tag: 'editable4_tag',
                row_number: 3,
                editable_row_max: 10,
                enable_keyboard: true,
                enable_tab_insert: true,
                enable_button: true,
                columns: [
                    0, //{ type: 'checkbox', name: 'id', value: '', readonly: false },
                    { type: 'text', name: 'name', value: '', align: 'left', readonly: false },
                    { type: 'date', name: 'begin_time', value: '', align: 'center', readonly: false },
                    { type: 'date', name: 'end_time', value: '', align: 'center', readonly: true },
                    { type: 'text', name: 'organizer', value: '', align: 'left', readonly: false },
                    { type: 'select', name: 'remark', value: '', align: 'left', readonly: false, values: { 0: 'ok', 1: 'no' }, style: { padding: '5px 4px 6px' } },
                ]
            });
        });

        funsent.editable.init('#editable5', {
            tag: 'editable5_tag',
            row_number: 5,
            editable_row_max: 10,
            enable_keyboard: true,
            enable_tab_insert: true,
            enable_button: true,
            columns: [
                { type: 'checkbox', name: 'id', value: '1', readonly: false },
                { type: 'text', name: 'name', value: 'funsent-editable', align: 'left', readonly: false },
                { type: 'date', name: 'begin_time', value: '2021-12-18', align: 'center', readonly: false },
                { type: 'date', name: 'end_time', value: '2021-12-19', align: 'center', readonly: true },
                { type: 'text', name: 'organizer', value: 'funsent 5', align: 'left', readonly: false },
                { type: 'select', name: 'remark', value: '1', align: 'left', readonly: false, values: { 0: 'ok', 1: 'no' }, style: { padding: '5px 4px 6px' } },
            ]
        });

        $('#editable5-tran-btn').click(function () {
            let data = funsent.editable.data('#editable5');
            // let data = funsent.editable.data(4);
            // let data = funsent.editable.data({tag:'editable5_tag'});
            console.log(data);
            $('#editable5-data-result').html('editable5 数据获取结果：<br />' + JSON.stringify(data));
        });

        $('#editable-debug-btn').click(function () {
            let info = funsent.editable.info();
            console.log(info);
            $('#editable-debug-result').html('所有editable实例的调试信息：<br />' + JSON.stringify(info));
        });

        $('#editable1-debug-btn').click(function () {
            let info = funsent.editable.info('#editable1');
            console.log(info);
            $('#editable-debug-result').html('editable1的所有调试信息：<br />' + JSON.stringify(info));
        });

        $('#editable2-debug-btn').click(function () {
            let info = funsent.editable.info('#editable2', 'configs');
            console.log(info);
            $('#editable-debug-result').html('editable2的配置参数：<br />' + JSON.stringify(info));
        });
    </script>
</body>

</html>